<template>
    <div>
        <!-- 装备栏 -->
        <ul class="absolute bottom-0 left-1/2 -translate-x-1/2 flex gap-1">
            <li class="w-10 h-10 border-2 border-blue-400 grid place-items-center bg-[rgba(0,0,0,0.2)]">
                <div class="w-3/4 h-3/4 rounded-full bg-[#dede8d]"></div>
            </li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
            <li class="w-10 h-10 border-2 bg-[rgba(0,0,0,0.2)]"></li>
        </ul>
        <!-- 角色卡片 -->
        <div
            class="bg-[rgba(255,255,255,0.5)] select-none rounded-lg backdrop-blur-xl px-3 w-[26rem] h-32 absolute left-0 flex">
            <img src="../assets/imgs/avatar.jpg" class="rounded-full w-32 h-32 p-2" alt="">
            <div class="m-auto">
                <div class="name w-80 h-10 bg-[rgba(255,255,255,0.5)] grid place-items-center">
                    <p class="mr-16 font-mono">呆呆鱼🐟</p>
                </div>
                <div class="mt-3 flex items-center justify-between gap-5 w-64">
                    <svg @click="showName(`good`)" t="1724237649029"
                        class="icon hover:scale-125 border-2 rounded-full p-1 duration-200 cursor-pointer border-dashed bg-[rgba(0,0,0,0.1)]"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31431" width="46"
                        height="46">
                        <path
                            d="M856.192 992H167.808c-39.488 0-71.552-35.968-71.552-80.064V480h64v431.936c0 10.368 5.696 16.064 7.552 16.064h688.384c1.856 0 7.616-5.696 7.616-16.064V480h64v431.936c0 44.096-32.128 80.064-71.616 80.064z"
                            p-id="31432"></path>
                        <path
                            d="M679.424 741.696H344.512c-39.424 0-71.552-34.368-71.552-76.672V486.592h64v178.432c0 7.616 4.544 12.672 7.552 12.672h334.912c3.072 0 7.552-4.928 7.552-12.672V486.592h64v178.432c0 42.304-32.128 76.672-71.552 76.672z"
                            p-id="31433"></path>
                        <path
                            d="M897.984 526.464c-38.4 0-73.152-17.28-96.512-44.928a126.144 126.144 0 0 1-193.152 0.064c-23.232 27.52-57.92 44.8-96.256 44.864h-0.384a125.952 125.952 0 0 1-96-44.864 126.336 126.336 0 0 1-193.152-0.064 126.144 126.144 0 0 1-96.576 44.928A127.04 127.04 0 0 1 0.192 413.888l2.368-35.968c0.256-3.2 1.024-6.4 2.24-9.344L101.312 130.56c1.664-4.224 17.088-41.024 43.712-68.608C168.896 37.184 206.848 32 234.496 32c8 0 13.12 0.448 13.12 0.448l530.88-0.128c0.512-0.064 4.928-0.32 11.008-0.32 27.648 0 65.6 5.184 89.408 29.888 26.688 27.648 42.048 64.448 43.712 68.544l96.576 238.016c1.28 3.008 1.984 6.208 2.24 9.408l2.432 29.632c-7.616 70.592-61.696 118.976-125.888 118.976z m-99.008-148.672c16.256 0 34.88 12.16 36.736 28.352a63.04 63.04 0 0 0 62.272 56.256 63.104 63.104 0 0 0 62.272-56l-1.984-17.92-94.912-233.92c-0.128-0.256-12.096-29.12-30.528-48.192-4.864-5.184-20.288-10.368-43.328-10.368l-7.616 0.192-537.088 0.128-10.304-0.32c-23.04 0-38.4 5.184-43.392 10.368-18.368 19.072-30.4 48-30.528 48.256L65.984 388.032l-2.112 24.768c3.648 25.536 30.4 49.664 62.08 49.664a63.04 63.04 0 0 0 62.336-56.256c1.792-16.192 15.488-28.416 31.744-28.416s34.88 12.224 36.736 28.416a62.976 62.976 0 0 0 62.272 56.256c32 0 58.752-24.256 62.272-56.448 1.792-16.256 15.552-28.544 31.872-28.544s34.88 12.288 36.672 28.544a62.912 62.912 0 0 0 62.208 56.448c31.872 0 58.624-24.32 62.144-56.512 1.792-16.192 15.488-28.48 31.808-28.48s34.816 12.288 36.608 28.48a63.04 63.04 0 0 0 62.336 56.512 62.976 62.976 0 0 0 62.272-56.256 31.936 31.936 0 0 1 31.744-28.416z"
                            p-id="31434"></path>
                    </svg>
                    <svg @click="showName(`role`)" t="1724238337288"
                        class="icon hover:scale-125 duration-200 cursor-pointer border-2 border-dashed rounded-full p-1 bg-[rgba(0,0,0,0.1)]"
                        viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36396" width="46"
                        height="46">
                        <path
                            d="M392.920908 608.305717a224.526233 224.526233 0 1 1 224.526234-224.526234 224.526233 224.526233 0 0 1-224.526234 224.526234z m0-384.902115a160.375881 160.375881 0 1 0 160.375881 160.375881 160.375881 160.375881 0 0 0-160.375881-160.375881z"
                            p-id="36397"></path>
                        <path
                            d="M713.67267 864.907126h-64.150352a256.60141 256.60141 0 0 0-513.202819 0h-64.150353a320.751762 320.751762 0 0 1 641.503524 0zM665.559906 576.23054v-64.150352a144.338293 144.338293 0 1 0-38.009084-283.704933l-16.839467-61.905091a208.488645 208.488645 0 1 1 54.848551 409.760376z"
                            p-id="36398"></path>
                        <path
                            d="M954.236492 800.756774h-64.150353a224.526233 224.526233 0 0 0-224.526233-224.526234v-64.150352a288.676586 288.676586 0 0 1 288.676586 288.676586z"
                            p-id="36399"></path>
                    </svg>
                    <svg @click="showName(`mail`)" t="1724237882261"
                        class="icon hover:scale-125 duration-200 cursor-pointer border-2 rounded-full p-1 border-dashed bg-[rgba(0,0,0,0.1)]"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33525" width="46"
                        height="46">
                        <path
                            d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z"
                            fill="" p-id="33526"></path>
                    </svg>
                    <svg @click="showName(`bag`)" t="1724238391509"
                        class="icon hover:scale-125 duration-200 cursor-pointer border-2 rounded-full p-1 border-dashed bg-[rgba(0,0,0,0.1)]"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38657" width="46"
                        height="46">
                        <path d="M0 488.727273h1024v93.090909H0z" fill="#2c2c2c" p-id="38658"></path>
                        <path
                            d="M930.909091 302.545455v558.545454H93.090909V302.545455h837.818182m0-93.09091H93.090909c-51.2 0-93.090909 41.890909-93.090909 93.09091v558.545454c0 51.2 41.890909 93.090909 93.090909 93.090909h837.818182c51.2 0 93.090909-41.890909 93.090909-93.090909V302.545455c0-51.2-41.890909-93.090909-93.090909-93.09091z"
                            fill="#2c2c2c" p-id="38659"></path>
                        <path
                            d="M674.909091 162.909091v46.545454H349.090909V162.909091h325.818182m0-93.090909H349.090909c-51.2 0-93.090909 41.890909-93.090909 93.090909v139.636364h512V162.909091c0-51.2-41.890909-93.090909-93.090909-93.090909zM558.545455 465.454545h-93.09091c-13.963636 0-23.272727 9.309091-23.272727 23.272728v93.090909c0 13.963636 9.309091 23.272727 23.272727 23.272727h93.09091c13.963636 0 23.272727-9.309091 23.272727-23.272727v-93.090909c0-13.963636-9.309091-23.272727-23.272727-23.272728z"
                            fill="#2c2c2c" p-id="38660"></path>
                    </svg>
                </div>
            </div>
        </div>
        <Mailbox v-if="showMail" @showName="showName('mail')"></Mailbox>
        <RoleInfo v-if="showRole" @showName="showName('role')"></RoleInfo>
        <Goods v-if="showGood" @showName="showName('good')"></Goods>
        <Bag v-if="showBag" @showName="showName('bag')"></Bag>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showMail = ref(false)
const showRole = ref(false)
const showGood = ref(false)
const showBag = ref(false)

const showName = (name: string) => {
    switch (name) {
        case 'mail':
            showMail.value = !showMail.value
            break;
        case 'role':
            showRole.value = !showRole.value
            break;
        case 'good':
            showGood.value = !showGood.value
            break;
        case 'bag':
            showBag.value = !showBag.value
            break;
    }
}
</script>

<style scoped>
#bar {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    left: -200px;
    width: 50rem;
    height: 40rem;
    background-color: lightblue;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 9999;
    background: url("../assets/imgs/frame.jpg") no-repeat center center / cover;
}

:deep(.el-rate__item) {
    margin: 0 1px;
}

.name {
    clip-path: polygon(75% 0%, 80% 50%, 75% 100%, 0% 100%, 5% 50%, 0% 0%);
}
</style>
